<!-- @format -->

<template>
    <div class="ma-content-block  p-4" style="height: 88vh">
        <div class='flex align_center' style="margin-bottom:16px">
            <div>时间筛选：</div>
            <div style="margin-right:16px">
                <a-button :type="timeType == 1?'primary':'dashed'" @click="handlleTime(1)">按月</a-button>
            </div>
            <div style="margin-right:16px">
                <a-button :type="timeType == 2?'primary':'dashed'" @click="handlleTime(2)">按年</a-button>
            </div>
            <div style="margin-right:16px">
                <a-button :type="timeType == 3?'primary':'dashed'" @click="handlleTime(3)">自定义</a-button>
            </div>
            <a-range-picker
            :mode="timeType == 1?'month':timeType == 2?'year':'date'"
                :show-time = "timeType == 3?true:false"
                :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                format="YYYY-MM-DD HH:mm"
                v-model="form.process_time"
                @change="onSelect"
                style="width: 354px;margin-right: 24px;"
            />
            <a-tooltip content="请选择公司">
                <a-select style="width:240px;margin-right:24px;" v-model="form.dept_id" :filter-option="filterOption" :options="dept_list" :field-names="{ value: 'id', label: 'name' }"  allow-clear allow-search
                            placeholder="请选择公司" />
            </a-tooltip>
            <a-button style="margin-right:16px" type="primary"  @click="handleSearch"> 搜索 </a-button>
            <a-button style="margin-right:16px" type="primary"  @click="handleResetting"> 重置 </a-button>
            <a-button type="primary"  @click="handleExports"> 导出</a-button>
        </div>
        
        <a-table 
        ref="exportTableRef" :columns="columns" summary-text="合计" summary
        :column-resizable="true" :data="tableData" :scroll="{x:2000, y:600 }"
        :table-layout-fixed="true" :bordered="{wrapper: true, cell: true}" :pagination="false"
            >
            <template #car_no="{record}">
                <div>{{ record.car_type }} - {{ record.car_no }}</div>
            </template>
            <template #summary-cell="{ column, record }">
                {{
                    column.dataIndex == "xuhao"? "合计" :
                    column.dataIndex == "dept_name"? '' :
                    (record[column.dataIndex] - 0).toFixed(2)
                }}
            </template>
        </a-table>

        <div style="padding-bottom: 2%"></div>
        <!-- 加载中... -->
        <div
            v-if="loading"
            style="
            position: fixed;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            display: flex;
            top: 0;
            left: 0;
            justify-content: center;
            align-items: center;
            "
        >
            <a-spin dot :size="10" />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted,onActivated } from "vue";
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import { Notification } from "@arco-design/web-vue";
import {dateFormat} from '@/utils/util.js'
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import { pinyin } from "pinyin-pro"
import { ElMapExportTable } from "table-excel";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const timeType = ref(1)
const time = ref('')
const fadaoList = ref([
    {key:1,value:'集装箱'},
    {key:2,value:'整车'},
    
])
const transportList = ref()
const newDate = new Date();
// 当天
const newDay = newDate.getDate();  
// 当年
const newYear = newDate.getFullYear();
// 当月
const newMonth = (newDate.getMonth() + 1)>9?(newDate.getMonth() + 1):'0' + (newDate.getMonth() + 1);
const price_typeList = ([])
const tableData = ref([])
const dept_list = ref([])
const exportData = ref([])
const price_list = ref([])
const payTypeList = ref([
    {
        title:'预付款',
        value:'money'
    },
    {
        title:'周期结算',
        value:'periodic'
    },
    {
        title:'现结',
        value:'now_pay'
    },
])
const filterOption = (v,option)=>{
    return option.keywords.some(keywords=>keywords.includes(v))
}
const handleDeptList = () => {   //  获取公司列表
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
            openPage: false,
            remoteOption: {
                filter: {
                    type: ['=', 2],
                    status: ['=', 1]
                },
                select: ["id", "name"],
                sort: { id: "desc" }
            }
        }
    }).then(res => {
        res.data.map((v, i) => {
            v.keywords = [
                v.name,
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join(''),
                pinyin(v.name, { toneType: 'none', pattern: 'first' }).split(' ').join('').toUpperCase()
            ]
        })
        dept_list.value = res.data
    })
}
const handlleTime = (type) =>{
    time.value = ''
    timeType.value = type
}
const tableColumns = ref([
    {title:`${newYear}年${newMonth}月${newDay}日`,children:[
        {title:'序号',dataIndex:'xuhao'},
        {title:'客户',dataIndex:'dept_name'},
        
        {title:'合计金额',dataIndex:'total_price'},
    ]}
    
])
const form = ref({
    process_time:[],   // 办理时间
    dept_id:'',
})
const handlePayType = (e) => {
    let name = ''
    payTypeList.value.map((v,i)=>{
        if(v.value == e){
            name = v.title
        }
    })
    
    return name
}
const onSelect = (e)=>{
    if(timeType.value == 1){
        let month = e[1].split('-')[1]
        let nian = e[1].split('-')[0]
        form.value.process_time = [e[0] + `-01 00:00:00`,e[1] + `${month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12?'-31':month == 4 || month == 6 || month == 9 || month == 11?'-30':nian % 4 == 0?'-29':'-28'} 23:59:59`]
    }else if(timeType.value == 2){
        form.value.process_time = [e[0] + `-01-01 00:00:00`,e[1] + `-12-31 23:59:59`]
    }else if(timeType.value == 3){
        form.value.process_time = e
    }
    
}
const handleExports = ()=> {
      const instance = new ElMapExportTable(
        {
            column:tableColumns.value,
            data:exportData.value,
            setRowStyle({ data, columnIndex, rowIndex, type }) {
            if (type === "main") {
              return {
                height: 40,
              };
            }
          },
        },
        // {progress: progress => console.log(progress)}
      );
      instance.download("威斯腾收入汇总");
}
const handleSearch = ()=>{
    handleDataList()
}
const handleResetting = ()=>{
    form.value = {
        process_time:[],   // 办理时间
    }
    handleDataList()
}

onMounted(()=>{
    commonApi.getDict("price_type").then((res) => {
        price_typeList.value = res.data;
        let arr = []
        res.data.map((v,i)=>{
            arr.push({title:v.title,width:300,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
            // background:'rgba(46,87,170,1)',
            // color:'#fff'
        },children:[
            {title:'合计',dataIndex:'price_type_' + v.key,width:100,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        }},
            {title:'不含税价',dataIndex:'no_tax_price_' + v.key,width:100,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        }},
            {title:'税额',dataIndex:'tax_price_' + v.key,width:100,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        }},
        ]})
        })
        tableColumns.value[0].children.splice(-1,0,...arr)
        columns.value.splice(-1,0,...arr)
        handleDataList()
    });
    commonApi.getDict("transport_type").then((res) => {
        transportList.value = res.data;
        console.log(transportList.value)
    });
    handleDeptList()
    
})
onActivated(()=>{
    handleDataList()
})
const handleDataList = (obj)=>{   // 获取台账数据
        loading.value = true
        request({
            url: 'prediction/Tz/syhz',
            method: 'get',
            params: form.value,
        }).then(res => {
            console.log(res)
            let _data = res.data.data
            _data.map((v,i)=>{
                v.xuhao = i + 1
                v.total_price = v.total_price - 0
                v.no_tax_total_price = v.no_tax_total_price - 0
                v.tax_total_price = v.tax_total_price - 0
                price_typeList.value.map((vv,ii)=>{
                    v['no_tax_price_' + (ii+1)] = v['no_tax_price_' + (ii+1)] - 0
                    v['price_type_' + (ii+1)] = v['price_type_' + (ii+1)] - 0
                    v['tax_price_' + (ii+1)] = v['tax_price_' + (ii+1)] - 0
                })
            })
            console.log('_data:',_data)
            tableData.value = _data
            exportData.value = JSON.parse(JSON.stringify(_data))
            
            setTimeout(() => {
                loading.value = false
            }, 1000)
        }).catch(rej=>{
            loading.value = false
        })
}
const columns = ref([
    {
        title: '序号',
        dataIndex: 'xuhao',
        width:70,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
        fixed:'left'
    },
    {
        title: '客户',
        dataIndex: 'dept_name',
        width:160,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
        fixed:'left'
    },
    {
        title: '合计金额',
        // dataIndex: 'total_price',
        width:300,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
        fixed:'right',
        children:[
            {
                title:'价税合计',dataIndex:'total_price',width:100,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
                }
            },
            {
                title:'不含税合计',dataIndex:'no_tax_total_price',width:100,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
                }
            },
            {
                title:'税额合计',dataIndex:'tax_total_price',width:100,headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
                }
            },
        ]
    },
    
    
])

</script>
<style>

</style>
<script>

export default { name: "ledger:income" };
</script>
